<template>

	<view class="item-container" :style="{'height': classInfo.height * h +'px', top: `${ h * classInfo.offset}px`,'background-color':colorList[Math.floor(Math.random() * colorList.length)], }" >
		<div>{{classInfo.title}}</div>
		<div>{{classInfo.place}}</div>
	</view>
</template>

<script>
	export default {
		name:"timetable-item",
		props:{
			classInfo:{
				type:Object

			},
			h:{
				type:Number,
				default: 40
			}
		},
		data() {
			return {
				colorList:[
					'hsl(42, 48%, 54%)',
                    'hsl(138, 24%, 48%)',
                    'rgb(200, 138, 131)',
                    'rgb(84, 221, 226)',
                    'rgb(178, 199, 168)',
                    'rgb(16, 195, 195)',
                    'hsl(0, 21%, 68%)',
                    'rgb(226, 166, 198)',
                    'hsl(278, 17%, 66%)',
                    'rgb(153, 199, 235)',
                    'blueviolet'
                    ]
			}
		},
		created(){
			//console.log(this.classInfo)
		}
	}
</script>
	
<style scoped>
.item-container{

	font-size: 20rpx;
	color: #fff;
	border-radius: 9rpx;
	background-color: black;
	box-sizing: border-box;
	width: calc(100% / 7.2) ;
	position: absolute;
	margin: 1px 0;
	padding-top: 10px;
	text-align: center;
	
	
	}

</style>